import React from 'react';
import { createForm } from 'rc-form';

class Form extends React.Component {
  submit = () => {
    const { validateFields } = this.props.form;
    // validateFields(err,val)用于校验与获取收集到的数据
    validateFields((error, value) => {
      console.log(error, value);
      if (!error) {
        // 将收集到的数据提交给服务器
      }
    });
  };

  render() {
    const { getFieldProps, getFieldError } = this.props.form;
    /**
     * getFieldProps('key',options)：
     * 用于与控件进行绑定，控件的数据将被rc-form接管（被绑定的控件必须拥有value和onChange）
     * ——key-该控件的唯一标识。
     * ——options—选项：
     * ————rules：校验规则;
     * —————initialValue：初始值;
     * getFieldDecorator与getFieldProps类似，但多了一些helper警告。
     */
    const errors = getFieldError('password') ? getFieldError('password') : null;
    return (
      <div>
        <div>
          <label htmlFor="#username">
            账号：
            <input
              id="username"
              {...getFieldProps('username', {
                initialValue: '',
              })}
            />
          </label>
        </div>
        <div>
          <label htmlFor="#password">
            密码：
            <input
              {...getFieldProps('password', {
                initialValue: '',
                onChange() {},
                rules: [{ required: true }],
              })}
              id="password"
              type="password"
            />
            {errors}
          </label>
        </div>
        <div>
          <button onClick={this.submit} type="button">
            登录
          </button>
        </div>
      </div>
    );
  }
}
export default createForm({
  /* options */
  /*
    createForm内的选项一般用于
    1.将表单收集的值传递给Redux或其他组件
    2.自定义校验消息内容，常用于将校验消息更改为中文信息(validateMessages)。
  */
})(Form);
